<template>
  <div>
    <div style="margin-bottom: 15px">
      <el-input v-model="userId" style="width: 200px" placeholder="请输入邀请者ID"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px" @click="findByUserId"></el-button>
      <el-button type="warning" icon="el-icon-refresh-right" style="margin-left: 10px" @click="reset"></el-button>
    </div>
    <!--邀请信息表-->
    <div>
      <el-table :data="tableData" style="width: 100%" :key="refreshKey">
        <el-table-column prop="invitationId" label="id" v-if="false"></el-table-column>
        <el-table-column prop="userId" label="邀请者id" :key="refreshKey"></el-table-column>
        <el-table-column prop="nickname" label="邀请者昵称" :key="refreshKey"></el-table-column>
        <el-table-column prop="invitationStatus" label="邀请状态" :key="refreshKey"></el-table-column>
        <el-table-column prop="invitationTime" label="邀请时间" :key="refreshKey"></el-table-column>
        <el-table-column label="操作" :key="refreshKey">
          <template slot-scope="scope">
            <el-button type="success" @click="accept(scope.row.userId)" :disabled="scope.row.invitationStatus!=='no-response-received'">接受</el-button>
            <el-button type="danger" @click="reject(scope.row.userId)" :disabled="scope.row.invitationStatus!=='no-response-received'">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      params: {
        username: '',
        pageNum: 1,
        pageSize: 5
      },
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      addOrUpdate: false,
      form: {},
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
      userId: '',
      refreshKey: 0
    }
  },
  created() {
    this.findAllInvitedRecords()
  },
  methods: {
    // 按用户id查询当前用户所有被邀请记录的相关信息
    findAllInvitedRecords() {
      request.get("/invitation/search/invitee/" + this.user.id
      ).then(res => {
        if (res.code === '0') {
          this.tableData = res.data;
          console.log("cur user's invitation info: ", res.data);
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    accept(id) {
      request.post("/invitation/accept/" + this.user.id + "/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            message: "已同意邀请",
            type: 'success'
          });
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
        this.refreshKey=this.refreshKey+1;
        this.$router.go(0);
      })
    },
    reject(id) {
      request.post("/invitation/reject/" + this.user.id + "/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            message: "已拒绝邀请",
            type: 'success'
          });
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
        this.refreshKey=this.refreshKey+1;
        this.$router.go(0);
      })
    },
    // 刷新
    reset() {
      this.findAllInvitedRecords()
    },
    findByUserId() {
      if (this.userId === null || this.userId === undefined || this.userId === '') {
        this.$message({
          message: '请输入想要查询的用户id',
          type: 'error'
        })
        return;
      }
      request.get("/invitation/search/invitee/" + this.user.id + "/" + this.userId).then(res => {
        if (res.code === "0") {
          this.tableData = res.data;
          console.log("cur user's invitation info 2: ", res.data);
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
          this.tableData = [];
        }
      })
    }
  },
  watch:{
    refreshKey(){
      this.$router.go(0);
    }
  }
}
</script>
